<template>
  <el-row class="hotel-item">
    <el-col :span="8">
      <nuxt-link :to="'/hotel/'+data.id">
        <el-image style="width: 320px; height: 210px" :src="data.photos"></el-image>
      </nuxt-link>
    </el-col>
    <el-col :span="10">
      <h3 class="hotel-zn-name">
        <nuxt-link :to="'/hotel/'+data.id">{{data.name}}</nuxt-link>
      </h3>
      <div class="hotel-en-name">
        <span>{{data.alias}}</span>
        <template v-if="data.hotellevel">
          <span :title="data.hotellevel.name+'级'">
            <i class="iconfont icon-V3" v-for="icon in data.hotellevel.level" :key="icon"></i>
          </span>
        </template>
        <template v-if="data.hoteltype">
          <span>{{data.hoteltype.name}}</span>
        </template>
      </div>
      <el-row class="hotel-comment">
        <el-col :span="10">
          <el-rate
            :value="data.stars"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}"
          ></el-rate>
        </el-col>
        <el-col :span="7">
          <span class="height-light">83</span>
          篇游记
        </el-col>
      </el-row>
      <div class="location-row">
        <i class="el-icon-location"></i>
        {{data.address}}
      </div>
    </el-col>
    <el-col :span="6">
      <el-table
        :data="data.products"
        @row-click="handlePrice"
        :show-header="false"
        style="width: 100%;padding:0 10px;marginTop:20px;"
      >
        <el-table-column prop="name"></el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <span style="color:#ffc107;font-size:16px;">￥{{scope.row.price}}</span>起
            <i class="el-icon-arrow-right"></i>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    handlePrice(row, column, event) {
      console.log(row);
      console.log(column);
      console.log(event);
    }
  }
};
</script>

<style lang="less" scoped>
.hotel-item {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  h3.hotel-zn-name {
    font-size: x-large;
    font-weight: 400;
    a {
      color: inherit;
    }
  }
  .hotel-en-name {
    font-size: 16px;
    color: #999;
    .icon-V3:before {
      color: #ffc107;
    }
  }
  .hotel-comment {
    padding: 10px 0;
    .height-light {
      color: #ffc107;
    }
  }
  .location-row {
    font-size: 14px;
    color: #666;
  }
  .el-table {
    cursor: pointer;
  }
}
</style>